<template>
    <div class="h5-box nav-box">
        <div class="nav-bar l-f l-col-stretch">
            <div class="nav-bar_left">
                <div @click="onBack" class="nav-bar_left_btn l-f l-row-c">
                    <img class="nav-bar_left_btn_icon" src="@/assets/icons/icon-left.svg" alt="">
                </div>
            </div>
             <div class="nav-bar_content l-f1 l-f l-row-c">
                <div class="nav-bar_content_title" :style="{
                    fontSize: fontSize + 'px'
                }">{{title}}</div>
             </div>
              <div class="nav-bar_right"></div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
defineProps({
    title: {
        type: String,
        default: ''
    },
    fontSize: {
        type: Number,
        default: 20
    }
})

const router = useRouter()

const onBack = () => {
    router.back()
}

</script>

<style lang="scss" scoped>
.h5-box {
    display: none;
}
.nav-box {
    padding-top: 55px;
}
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    height: 55px;
    background-color: #070628;
    &_left {
        width: 65px;
        height: 100%;
        &_btn {
            height: 100%;
            &_icon {
                width: 22px;
                height: 20px;
            }
        }
    }
    &_content {
        height: 100%;
        &_title {
            font-size: 20px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.5;
            text-align: center;
        }
    }
    &_right {
        width: 65px;
        height: 100%;
    }
}
@media only screen and (max-width: 1200px) {
    .h5-box {
        display: block;
    }
}
</style>